<template>
  <div class="login">
    <h2>奖学金系统</h2>
    <div>
      <el-input
        placeholder="请输入用户名"
        v-model="username"
        clearable
        class="input_style"
      ></el-input>
      <span v-if="error.name" class="err-msg">{{ error.password }}</span>
    </div>
    <div>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
        class="input_style"
      ></el-input>
      <span v-if="error.pwd" class="err-msg">{{ error.password }}</span>
    </div>
    <div>
      <el-button type="primary" @click="login" class="login_style"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
import { request } from "../request/http.js";
import qs from "qs";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      error: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    login() {
      if (this.username == "" || this.password == "") {
        this.$message.error("请输入账号密码");
        return;
      }
      const data = { username: this.username, password: this.password };
      request({
        url: "/login/",
        method: "post",
        data: qs.stringify(data),
      })
        .then((res) => {
          if (res.code == 200) {
            this.$router.push({
              name: "home",
            });
            this.$store.commit("setUserId", res.data.id);
            this.$store.commit("setName", res.data.name);
            this.$store.commit("setUserinfo", res.data.userinfo[0]);
            this.$store.commit("setRole", res.data.userinfo[0].role_id.id);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style>
.login {
  margin-top: 200px;
  border: 1px solid #dcdfe6;
  width: 200px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.input_style {
  width: 200px;
  margin-bottom: 10px;
}
.login_style {
  width: 200px;
}
</style>
